import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
import "./App.css";


function MyInput (props, ref) {
    const inputRef = useRef(null)
    // 不暴露整个input标签，仅仅暴露里面的focus方法和scrollIntoView方法
    useImperativeHandle(ref, () => {
        return {
            focus() {
                inputRef.current.focus()
            },
            scrollIntoView () {
                inputRef.current.scrollIntoView()
            }
        }
    }, [])
    return <input {...props} ref={inputRef} />
}
// 还是必须借助forwardRef进行转发
const Guang = forwardRef(MyInput)

function App() {
    const ref = useRef(null)

    useEffect(() => {
        console.log(ref, 'ref');
        ref.current.focus()
    }, [])
    return (
        <>
        <div className="card">
            <Guang ref={ref}></Guang>
            <button>编辑</button>
        </div>
        </>
    );
}

export default App;
